<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>云上书屋网上商城—图书商业的先行者：最新、正版、全品类</title>
		<link rel="icon" href="../../images/common/云上书屋.png" type="image/x-icon" />
		<link rel="stylesheet" href="../../css/detail/E-book.css">
		<link rel="stylesheet" href="../../css/common/nav.css">
		<link rel="stylesheet" href="../../css/common/foot.css">
		<link rel="stylesheet" href="../../css/detail/download/font_2801350_33mzkat3aem/iconfont.css">
		<link rel="stylesheet" href="../../css/common/bootstrap.min.css">
		<script src="../../js/common/jquery.min.js"></script>
		<script type="text/javascript" src="../../js/common/bootstrap.min.js"></script>
		<script src="../../js/common/jquery-1.12.4.js"></script>
	</head>
	<body>
		<a name="page-top"></a>
		<div id="head">
			<div id="head_top_lead">
				<div class='nav'>
					<ul>
						<li><img src="../../images/common/素材-大书.png"></li>
						<li><a href='../../index01.html'>主页</a></li>
						<li><a href='#'>分类</a>
							<ul>
								<li><a href='../../index01.html'>图书</a></li>
								<li><a href='../../index02.html'>电子书</a></li>
							</ul>
						</li>
						<li><a href='#'>个人中心</a>
							<ul>
								<li><a href='../../view/shoppingcar/shoppingcar.html'>购物车</a></li>
								<li><a href='../../view/personal_center/center.html'>个人信息</a></li>
								<li><a href='../../view/orders/orders.html'>订单信息</a></li>
								<li><a href='../../view/personal_center/center.html'>地址信息</a></li>
							</ul>
						</li>
						<li><a href='../../view/login/login.html'>登陆</a></li>
						<li><a href='../../view/login/login.html'>注册</a></li>
					</ul>
				</div>
				<div id="logo-search" style="width: 100%;background-color: white;z-index: 999;">
					<div class="logo-search">
						<div class="logo"></div>
						<div class="ls-right">
							<a href="#">
								<i class="iconfont" style="line-height: 30px;margin-left: 10px;margin-right: 5px;color:#3494FF ;">&#xe601;</i>
								购物车
								&nbsp;
								<span id="num">0</span>
								&nbsp;
								件
								&nbsp;
								>
							</a>

						</div>
						<div class="search">
							<div class="search-top">
								<input id="i1" type="text" placeholder="龙族Ⅳ奥丁之渊">
								<!-- <input id="i2" type="button" value="🔍"> -->
								<button id="i2" type="submit"><i class="iconfont" style="color: #EEE;">&#xe660;</i></button>
							</div>
							<div class="search-bottom">
								<span>热门搜索</span>
								<ul>
									<li><a href="#">云端定制</a></li>
									<li><a href="#">习大大在福建</a></li>
									<li><a href="#">北京冬奥会</a></li>
									<li><a href="#">贝聿铭全集</a></li>
									<li><a href="#">龙族Ⅲ月黑之潮</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>

				<div class="type" id="type">
					<button type="button" class="all-type">
						<i class="iconfont">&#xe66c;</i>
						<span>全部商品分类</span>
					</button>
					<ol class="breadcrumb" style="margin: 30px 0px;">
						<li style="margin-left: 20px;"><a href="#">电子书</a></li>
						<li><a href="#">学习经典</a></li>
						<li class="active">携手消除贫困 促进共同发展——在2015减贫与发展高层论坛的主旨演讲</li>
					</ol>
				</div>
			</div>
		</div>
		<div id="body">
			<div class="body-middle">
				<div class="type-left">
					<ul>
						<li>
							<div class="type-in">
								<a href="#" class="in-one">文学艺术</a>
								<br>
								<a href="#" class="in-two">小说</a>
								<a href="#" class="in-two">文学</a>
								<a href="#" class="in-two">艺术</a>
								<a href="#" class="in-two">传记</a>
							</div>
						</li>
						<li>
							<div class="type-in">
								<a href="#" class="in-one">人文社科</a>
								<br>
								<a href="#" class="in-two">历史</a>
								<a href="#" class="in-two">哲学宗教</a>
								<a href="#" class="in-two">心理</a>
							</div>
						</li>
						<li>
							<div class="type-in">
								<a href="#" class="in-one">少儿童书</a>
								<br>
								<a href="#" class="in-two">儿童文学</a>
								<a href="#" class="in-two">科普百科</a>
							</div>
						</li>
						<li>
							<div class="type-in">
								<a href="#" class="in-one">教育考试</a>
								<br>
								<a href="#" class="in-two">中小教辅</a>
								<a href="#" class="in-two">外语学习</a>
							</div>
						</li>
						<li>
							<div>
								<a href="#" class="in-one">经济金融</a>
								<br>
								<a href="#" class="in-two">管理</a>
								<a href="#" class="in-two">经济</a>
								<a href="#" class="in-two">金融会计</a>
							</div>
						</li>
						<li>
							<div class="type-in">
								<a href="#" class="in-one">生活休闲</a>
								<br>
								<a href="#" class="in-two">烹饪美食</a>
								<a href="#" class="in-two">育儿早教</a>
							</div>
						</li>
						<li>
							<div class="type-in">
								<a href="#" class="in-one">科学技术</a>
								<br>
								<a href="#" class="in-two">工业科技</a>
								<a href="#" class="in-two">建筑</a>
								<a href="#" class="in-two">医学</a>
							</div>
						</li>
						<li style="height: 36.5px;">
							<div class="type-in">
								<a href="#" class="in-one">电子书</a>
							</div>
						</li>
					</ul>
				</div>
				<div class="introduce">
					<div class="introduce-left">
						<img class="right" src="//img13.360buyimg.com/n1/jfs/t4132/180/1705981457/8610/1c3fe057/58c64540Nd493282f.jpg"
						 style="width: 281px;height: 375px;">
						<div class="share">
							<a href="#" style="float: left;">
								<i class="iconfont">&#xe612;</i>
								分享
							</a>
							<a href="#" id="like" style="float: left;">
								<i class="iconfont">&#xe604;</i>
								收藏
							</a>
							<a href="#" id="dislike" style="display: none;float: left;">
								<i class="iconfont">&#xe630;</i>
								取消收藏
							</a>
						</div>
					</div>
					<div class="introduce-right">
						<div class="book-title">
							<h4 style="float: left;margin-top: 0px;display: inline;line-height: 100%;"> <span style="color: rgb(21,184,215);border: 1px solid rgb(21,184,215);border-radius: 3px;padding: 1px;margin-right: 20px;font-size: 16px;">电子书</span>携手消除贫困
								促进共同发展——在2015减贫与发展高层论坛的主旨演讲</h4>
						</div>
						<div class="low-pay">
							<div class="pay-num">
								<div class="pn-1">
									<span>
										销售价
										&nbsp;&nbsp;&nbsp;
										<h4 style="color: red;display: inline;font-weight: 900;">免费</h4>
										<span style="text-decoration: line-through;color: #999;font-size: 12px;margin-left: 10px;">￥ 2.0</span>
									</span>
								</div>
							</div>
						</div>
						<div style="width: 100%;height: 30px;"></div>
						<div class="ebook" style="float: left;display: inline;margin-left: 30px;">
							<p>作者</p>
							<p>出版社</p>
							<p>出版时间</p>
							<p>文件大小</p>
						</div>
						<div class="ebook-inf" style="float: left;display: inline;margin-left: 50px;">
							<p><a href="#">习大大</a></p>
							<p><a href="#">人们出版社</a></p>
							<p>2015 - 10 - 16</p>
							<p>167k</p>
						</div>

						<div class="clear"></div>
						<div class="add-shop">
							<button class="lanrenzhijia" id="addshop-btn1" type="button">加入购物车</button>
							<button id="addshop-btn2" type="button">购买阅读</button>
						</div>


					</div>
				</div>

				<div class="all-introduce">
					<div class="allint-top">
						<button class="all-top top-1" type="button">商品详情</button>
						<button class="all-top top-2" type="button">规格属性</button>
						<button class="all-top top-3" type="button">售后政策</button>
						<button class="all-top top-4" type="button">累计评价(<span>999</span>)</button>
					</div>
					<div class="for for-top1">
						<div class="t1-top">
							<span style="margin-left: 40px;color: #999;">商品编码(ISBN)</span>
							&nbsp;
							<span style="color: black;">9787010154008</span>
							<span style="margin-left: 50px;color: #999;">出版时间</span>
							&nbsp;
							<span style="color: black;">2015-10-16</span>
							<span style="margin-left: 50px;color: #999;">出版社</span>
							&nbsp;
							<span style="color: black;">人民出版社</span>
							<span style="margin-left: 50px;color: #999;">作者</span>
							&nbsp;
							<span style="color: black;">习大大</span>
							<span style="margin-left: 50px;color: #999;">文件大小</span>
							&nbsp;
							<span style="color: black;">167k</span>
						</div>
						<div class="master">
							<a name="mark2"></a>
							<h3>内容简介</h3>
							<div style="margin-left: 20px;height: 5px;width: 80px;background-color:rgb(21,184,215) ;"></div>
							<p>2015减贫与发展高层论坛10月16日在北京人民大会堂举行。国家主席习近平出席论坛并发表题为《携手消除贫困
								促进共同发展》的主旨演讲。习近平强调，消除贫困是人类的共同使命。改革开放30多年来，中国走出了一条中国特色减贫道路。中国在致力于自身消除贫困的同时，积极展开南南合作，同舟共济，攻坚克难，支持和帮助广大发展中国家特别是最不发达国家消除贫困，为各国人民带来更多福祉。习近平强调，在上个月召开的联合国发展峰会上，各国通过了以减贫为首要目标的2015年后发展议程。今天，我们相聚北京，就是要向世界表明，我们将加强减贫发展领域交流合作，积极呼应和推动2015年后发展议程的落实。《携手消除贫困
								促进共同发展——在2015减贫与发展高层论坛的主旨演讲》收录了习近平讲话学习参考资料。</p>
							<a name="mark3"></a>
							<h3>作者简介</h3>
							<div style="margin-left: 20px;height: 5px;width: 80px;background-color:rgb(21,184,215) ;"></div>
							<p>习近平，男，汉族，1953年6月生，陕西富平人，1969年1月参加工作，1974年1月加入中国共产党，清华大学人文社会学院马克思主义理论与思想政治教育专业毕业，在职研究生学历，法学博士学位。现任中国共产党中央委员会总书记，中共中央军事委员会主席，中华人民共和国主席，中华人民共和国中央军事委员会主席。</p>
						</div>
					</div>
					<div class="for for-top2">
						<table class="table table-bordered">
							<thead>
								<tr>
									<th colspan="2">普通信息</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>商品编码(ISBN)</td>
									<td>9787559639509</td>
								</tr>
								<tr>
									<td>出版时间</td>
									<td>2020-04-10</td>
								</tr>
								<tr>
									<td>出版社</td>
									<td>北京联合出版公司</td>
								</tr>
								<tr>
									<td>作者</td>
									<td>范文澜</td>
								</tr>
								<tr>
									<td>文件大小</td>
									<td>167k</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="for for-top3">
						该商品不支持7天无理由退换货
					</div>
					<div class="for for-top4">
						<ul>
							<li>
								<div style="height: 100%;width: 180px;float: left;">
									<div style="height: 32px;width: 100%;">
										<div class="head-img"></div>
										<span style="line-height: 32px;">饿***哮</span>
									</div>
								</div>
								<div class="all-star" style="width: 760px;height: 100%;float: right;">
									<div>
										<i class="iconfont" style="color: rgb(21,184,215);">&#xe630;</i>
										<i class="iconfont" style="color: rgb(21,184,215);">&#xe630;</i>
										<i class="iconfont" style="color: rgb(21,184,215);">&#xe630;</i>
										<i class="iconfont">&#xe604;</i>
										<i class="iconfont">&#xe604;</i>
									</div>
									<div>非常好</div>
									<div style="text-align: right;">2021-9-12 14:20:34</div>
								</div>
							</li>
							<li>
								<div style="height: 100%;width: 180px;float: left;">
									<div style="height: 32px;width: 100%;">
										<div class="head-img"></div>
										<span style="line-height: 32px;">饿***哮</span>
									</div>
								</div>
								<div class="all-star" style="width: 760px;height: 100%;float: right;">
									<div>
										<i class="iconfont" style="color: rgb(21,184,215);">&#xe630;</i>
										<i class="iconfont" style="color: rgb(21,184,215);">&#xe630;</i>
										<i class="iconfont" style="color: rgb(21,184,215);">&#xe630;</i>
										<i class="iconfont">&#xe604;</i>
										<i class="iconfont">&#xe604;</i>
									</div>
									<div>非常好</div>
									<div style="text-align: right;">2021-9-12 14:20:34</div>
								</div>
							</li>
							<li>
								<div style="height: 100%;width: 180px;float: left;">
									<div style="height: 32px;width: 100%;">
										<div class="head-img"></div>
										<span style="line-height: 32px;">饿***哮</span>
									</div>
								</div>
								<div class="all-star" style="width: 760px;height: 100%;float: right;">
									<div>
										<i class="iconfont" style="color: rgb(21,184,215);">&#xe630;</i>
										<i class="iconfont" style="color: rgb(21,184,215);">&#xe630;</i>
										<i class="iconfont" style="color: rgb(21,184,215);">&#xe630;</i>
										<i class="iconfont">&#xe604;</i>
										<i class="iconfont">&#xe604;</i>
									</div>
									<div>非常好</div>
									<div style="text-align: right;">2021-9-12 14:20:34</div>
								</div>
							</li>
							<li>
								<div style="height: 100%;width: 180px;float: left;">
									<div style="height: 32px;width: 100%;">
										<div class="head-img"></div>
										<span style="line-height: 32px;">饿***哮</span>
									</div>
								</div>
								<div class="all-star" style="width: 760px;height: 100%;float: right;">
									<div>
										<i class="iconfont" style="color: rgb(21,184,215);">&#xe630;</i>
										<i class="iconfont" style="color: rgb(21,184,215);">&#xe630;</i>
										<i class="iconfont" style="color: rgb(21,184,215);">&#xe630;</i>
										<i class="iconfont">&#xe604;</i>
										<i class="iconfont">&#xe604;</i>
									</div>
									<div>非常好</div>
									<div style="text-align: right;">2021-9-12 14:20:34</div>
								</div>
							</li>
						</ul>
						<div style="height: 60px;">
							<nav aria-label="Page navigation" style="float: right;margin-top: 13px;">
								<ul class="pagination" style="margin:0px;">
									<li>
										<a href="#" aria-label="Previous">
											<span aria-hidden="true">&laquo;</span>
										</a>
									</li>
									<li><a href="#">1</a></li>
									<li><a href="#">2</a></li>
									<li><a href="#">3</a></li>
									<li><a href="#">4</a></li>
									<li><a href="#">5</a></li>
									<li>
										<a href="#" aria-label="Next">
											<span aria-hidden="true">&raquo;</span>
										</a>
									</li>
								</ul>
							</nav>
							<div style="float: right;height: 60px;line-height: 60px;margin-right: 20px;">14条&nbsp;/&nbsp;页</div>
							<div style="float: right;height: 60px;line-height: 60px;margin-right: 20px;">共&nbsp;4&nbsp;条记录</div>
						</div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<div class="foot">
			<!-- 多快好省start -->
			<div class="dkhs">
				<ul>
					<li>
						<div class="duo"></div>
						<p>品类齐全，轻松购物</p>
					</li>
					<li>
						<div class="kuai"></div>
						<p>多仓直发，急速配送</p>
					</li>
					<li>
						<div class="hao"></div>
						<p>正平行货，精致服务</p>
					</li>
					<li>
						<div class="sheng"></div>
						<p>天天低价，畅选无忧</p>
					</li>
				</ul>
			</div>
			<!-- 多快好省end -->

			<!-- 结尾start -->
			<div class="jiewei">
				<div class="j1">
					<ul>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">English</a></li>
						<li class="line"></li>
						<li><a href="#">Site</a></li>
						<li class="line"></li>
						<li><a href="#">Media & IR</a></li>
						<li class="line"></li>
					</ul>
				</div>
				<div class="j2">
					<p>云上书屋收录的免费书籍作品、频道内容、书友评论、胪上文字图片等其他切内容及在云上书屋所做之广告均属用户个人行为,与本网站无关。</p>
				</div>
				<div class="j3">
					<ul>
						<li class="l1"><a href="#"></a></li>
						<li class="l2"><a href="#"></a></li>
						<li class="l3"><a href="#"></a></li>
						<li class="l4"><a href="#"></a></li>
						<li class="l5"><a href="#"></a></li>
						<li class="l6"><a href="#"></a></li>
					</ul>
				</div>
			</div>
			<!-- 结尾end -->
		</div>
		<div class="return-top">
			<a class="jump-j" href="#mark2">
				<h4>内容简介</h4>
			</a>
			<a class="jump-j" href="#mark3">
				<h4>作者简介</h4>
			</a>
			<a href="#"><i class="iconfont" style="font-size: 30px;">&#xf8f1;</i></a>
			<a href="#page-top"><i class="iconfont" style="font-size: 30px;">&#xe613;</i></a>
		</div>
		<script>
			$(function() {
				// 下面的商品详情
				$(".jump-j").click(function() {
					$(".for").css("display", "none");
					$(".all-top").css("background", "#EDEAE9");
					$(".all-top").css("color", "black");
					$(".for-top1").css("display", "block");
					$(".top-1").css("background", "rgb(21,184,215)");
					$(".top-1").css("color", "white");
				});
				$(".top-1").click(function() {
					$(".for").css("display", "none");
					$(".all-top").css("background", "#EDEAE9");
					$(".all-top").css("color", "black");
					$(".for-top1").css("display", "block");
					$(".top-1").css("background", "rgb(21,184,215)");
					$(".top-1").css("color", "white");
				});
				$(".top-2").click(function() {
					$(".for").css("display", "none");
					$(".all-top").css("background", "#EDEAE9");
					$(".all-top").css("color", "black");
					$(".for-top2").css("display", "block");
					$(".top-2").css("background", "rgb(21,184,215)");
					$(".top-2").css("color", "white");
				});
				$(".top-3").click(function() {
					$(".for").css("display", "none");
					$(".all-top").css("background", "#EDEAE9");
					$(".all-top").css("color", "black");
					$(".for-top3").css("display", "block");
					$(".top-3").css("background", "rgb(21,184,215)");
					$(".top-3").css("color", "white");
				});
				$(".top-4").click(function() {
					$(".for").css("display", "none");
					$(".all-top").css("background", "#EDEAE9");
					$(".all-top").css("color", "black");
					$(".for-top4").css("display", "block");
					$(".top-4").css("background", "rgb(21,184,215)");
					$(".top-4").css("color", "white");
				});


				// 点击显示和隐藏分类
				$(".all-type").click(function() {
					$(".type-left").slideToggle(500);
				});

				// 收藏,取消收藏
				$("#like").click(function() {
					$("#dislike").css("display", "block");
					$("#like").css("display", "none");
				});
				$("#dislike").click(function() {
					$("#like").css("display", "block");
					$("#dislike").css("display", "none");
				});
			});

			//页面中发生滚动事件 页面中所有内容都在window浏览器里 还可以使用document
			window.onscroll = function() {
				//向上卷曲的值和最上面top的div高度进行比较
				var top = document.documentElement.scrollTop; //页面向上卷曲的值
				// var topPart = document.getElementById("topPart");//获取最上面的div
				// var height = topPart.offsetHeight;
				var logoSearch = document.getElementById("logo-search");
				var type = document.getElementById("type");
				if (top >= 135) {
					//给nav设置固定定位 添加类名为fixed
					logoSearch.className = "logo-search fixed";
					//给mainPart盒子设置margin-top的值是 navBar的高度
					type.style.marginTop = logoSearch.offsetHeight + "px";
				} else {
					//取消nav的固定定位
					logoSearch.className = "logo-search";
					type.style.marginTop = "0px";
				}
			};
			//购物车
			$(function() {
				var aa = 0;
				$('.lanrenzhijia').click(function() {
					aa += 1
					var flyElm = $('.lanrenzhijia').clone().css('opacity', '0.7');
					$("#num").text(aa);
					flyElm.css({
						'z-index': 9000,
						'display': 'block',
						'position': 'absolute',
						'top': $('.lanrenzhijia').offset().top + 'px',
						'left': $('.lanrenzhijia').offset().left + 'px',
						'width': $('.lanrenzhijia').width() + 'px',
						'height': $('.lanrenzhijia').height() + 'px'
					});
					$('body').append(flyElm);
					flyElm.animate({
						top: $('.right').offset().top,
						left: $('.right').offset().left,
						width: 50,
						height: 50,
					}, 'slow');
				});
			});
		</script>
	</body>
</html>
